<template>
  <div class="login" clearfix>
    <div class="login-wrap">
      <el-row type="flex" justify="center">
        <el-form ref="loginForm" :model="userForm" :rules="rules" status-icon label-width="80px">
          <h3>登录</h3>
          <hr>
          <el-form-item prop="username" label="用户名">
            <el-input v-model="userForm.username" placeholder="请输入用户名" prefix-icon></el-input>
          </el-form-item>
          <el-form-item id="password" prop="password" label="密码">
            <el-input v-model="userForm.password" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <div class="link-with">
            <router-link to="/findPass" class="link-with-underline">找回密码</router-link>
            <router-link to="/register" class="link-with-underline">注册账号</router-link>
          </div>


          <el-form-item>
            <div class="link-with">
            <el-button type="primary" plain  @click="doLogin()">登 录</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {mapMutations, mapState} from "vuex";
export default {
  name: "UserLogin",
  data() {
    return {
      userForm: {
        username: "",
        password: ""
      }
    };
  },
  computed:{
    ...mapState({
      user: state => state.user
    }),
  },
  // watch:{
  //   user(newVal, oldVal) {
  //     console.log("user", newVal);
  //     if (newVal.userId) {
  //       // this.$router.push({ path: "/home" });
  //     }
  //   }
  // },
  created() {

  },
  methods: {
    doLogin() {
      if (!this.userForm.username) {
        this.$message.error("请输入用户名！");
        return;
      } else if (!this.userForm.password) {
        this.$message.error("请输入密码！");
        return;
      } else{
        //校验用户名和密码是否正确;
        // this.$router.push({ path: "/personal" });
        axios
            .post("http://localhost:8989/user/login", {
              userName: this.userForm.username,
              userPass: this.userForm.password
            })
            .then(res => {
              console.log("输出response.data.status", res.status);
              // console.log("输出response.data", res.data.data);

                this.$store.commit("setUser", res.data.data);
                console.log(this.user);
                if(this.userForm.username!=='root'){
                  this.$router.push({ path: "/home" });
                }else {
                  this.$router.push({ path: "/user" });
                }
            })
            .catch(res=>{
              this.$message.error("用户名或密码错误或该用户被封禁！");
            });
      }
    },

  }
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/userbackground.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  background-position: center center; /* 图片居中显示 */
}
.login-wrap {
  background: rgba(255, 255, 255, 0.8);
  background-size: cover;
  width: 400px;
  height: 350px;
  margin: 215px auto;
  overflow: hidden;
  padding-top: 10px;
  line-height: 40px;

}
#password {
  margin-bottom: 5px;
}
h3 {
  color: #0babeab8;
  font-size: 24px;
}
hr {
  background-color: #444;
  margin: 20px auto;
}
a {
  text-decoration: none;
  color: #aaa;
  font-size: 15px;
}
a:hover {
  color: coral;
}
.el-button {
  width: 60%;
  margin-left: -30%;

}
.link-with{
  display: flex;
  justify-content: space-evenly;
}
.link-with-underline {
  text-decoration: underline;
  color: #2c3e50;
  /* 其他样式，如颜色、字体大小等 */
}
</style>